<template>
  <div class="channel-mobile">
    <div class="channel-mobile-banner">
      <div class="channel-mobile-banner-info">
        <div class="channel-mobile-banner-info-desc">
          <h2>易播数字人</h2>
          <p
            ><span
              >数字人直播先行者<br /><span
                >直播带货+企业留资+本地生活</span
              ></span
            ></p
          >
        </div>
        <div class="channel-mobile-banner-info-btn">
          <vs-button @click="openInfoDialog">咨询了解</vs-button>
        </div>
      </div>
      <div class="channel-mobile-banner-img"
        ><img src="https://static.pdwl.net/jituan/images/mobile/digitalMan/banner.png" alt=""
      /></div>
    </div>
    <div class="channel-mobile-product">
      <div class="channel-mobile-title">
        <h3>产品核心优势</h3>
        <p>短视频+直播时代，AI数字人直播行业风向标</p>
      </div>
      <div class="channel-mobile-product-body">
        <div
          v-for="(item, idx) in productArr"
          :key="idx"
          class="channel-mobile-product-body-item"
        >
          <div class="channel-mobile-product-body-item-img">
            <img :src="item.img" alt="" />
            <p>{{ item.title }}</p>
          </div>
        </div>
      </div>
      <div class="channel-mobile-product-desc">
        <div
          v-for="(item, idx) in productDesc"
          :key="idx"
          class="channel-mobile-product-desc-item"
        >
          <div class="channel-mobile-product-desc-item-box">
            <img src="https://static.pdwl.net/jituan/images/mobile/digitalMan/tick.png" alt="" />
            <span>{{ item }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="channel-mobile-living">
      <div class="channel-mobile-title">
        <h3>颠覆传统真人直播</h3>
        <p>低成本打造AI数字人主播，提升300%的效率， 节省超90%的时间和预算</p>
      </div>
      <div class="channel-mobile-living-body">
        <img src="https://static.pdwl.net/jituan/images/mobile/digitalMan/living.png" alt="" />
      </div>
    </div>
    <div class="channel-mobile-live">
      <div class="channel-mobile-title">
        <h3>AI数字人直播场景</h3>
        <p>多场景应用满足各行业客户需求<br />打开直播间流量增长新引擎</p>
      </div>
      <div class="swiper-container channel-mobile-live-body">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide flex_cen channel-mobile-live-body-item"
            v-for="(item, idx) in liveArr"
            :key="idx"
          >
            <div class="channel-mobile-live-body-item-img">
              <h5>{{ item.title }}</h5>
              <img :src="item.img" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="channel-mobile-plattype">
      <div class="channel-mobile-title">
        <h3>AI数字人直播平台</h3>
      </div>
      <div class="channel-mobile-plattype-body">
        <img src="https://static.pdwl.net/jituan/images/mobile/digitalMan/plattype.png" alt="" />
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import Footer from '@/components/footer/index.vue';
export default {
  components: { Footer },
  data() {
    return {
      productArr: [
        {
          title: 'AI数字人直播',
          img: 'https://static.pdwl.net/jituan/images/digitalMan/icon15.png',
        },
        {
          title: 'AI口播制作',
          img: 'https://static.pdwl.net/jituan/images/digitalMan/icon16.png',
        },
        {
          title: 'AI脚本撰写',
          img: 'https://static.pdwl.net/jituan/images/digitalMan/icon12.png',
        },
        {
          title: '定制形象克隆',
          img: 'https://static.pdwl.net/jituan/images/digitalMan/icon7.png',
        },
      ],
      productDesc: [
        '解决创作效率低',
        '规避主播流失风险',
        '打破主播起步难',
        '节省团队综合成本',
        '解决全时段直播难',
        '获得稳定曝光流量',
      ],
      liveArr: [
        {
          title: '企业服务行业',
          img: 'https://static.pdwl.net/jituan/images/digitalMan/icon21.png',
        },
        {
          title: '教育培训行业',
          img: 'https://static.pdwl.net/jituan/images/digitalMan/icon22.png',
        },
        {
          title: '本地生活行业',
          img: 'https://static.pdwl.net/jituan/images/digitalMan/icon23.png',
        },
        {
          title: '直播带货行业',
          img: 'https://static.pdwl.net/jituan/images/digitalMan/icon1.png',
        },
        {
          title: '文旅宣传行业',
          img: 'https://static.pdwl.net/jituan/images/digitalMan/icon24.png',
        },
        {
          title: '传统制造行业',
          img: 'https://static.pdwl.net/jituan/images/digitalMan/icon25.png',
        },
        {
          title: '时尚美业行业',
          img: 'https://static.pdwl.net/jituan/images/digitalMan/icon26.png',
        },
        {
          title: '广电新闻行业',
          img: 'https://static.pdwl.net/jituan/images/digitalMan/icon27.png',
        },
      ],
      plattypeArr: [
        {
          title: '企业服务行业',
          img: 'https://static.pdwl.net/jituan/images/digitalMan/icon6.png',
        },
        {
          title: '教育培训行业',
          img: 'https://static.pdwl.net/jituan/images/digitalMan/icon2.png',
        },
        {
          title: '本地生活行业',
          img: 'https://static.pdwl.net/jituan/images/digitalMan/icon8.png',
        },
        {
          title: '直播带货行业',
          img: 'https://static.pdwl.net/jituan/images/digitalMan/icon3.png',
        },
        {
          title: '文旅宣传行业',
          img: 'https://static.pdwl.net/jituan/images/digitalMan/icon9.png',
        },
        {
          title: '传统制造行业',
          img: 'https://static.pdwl.net/jituan/images/digitalMan/icon5.png',
        },
        {
          title: '时尚美业行业',
          img: 'https://static.pdwl.net/jituan/images/digitalMan/icon10.png',
        },
        {
          title: '广电新闻行业',
          img: 'https://static.pdwl.net/jituan/images/digitalMan/icon4.png',
        },
        {
          title: '广电新闻行业',
          img: 'https://static.pdwl.net/jituan/images/digitalMan/icon4.png',
        },
      ],
    };
  },
  mounted() {
    this.initSwiper();
  },
  methods: {
    initSwiper() {
      new Swiper('.swiper-container', {
        autoplay: {
          delay: 3000, //时间 毫秒
          disableOnInteraction: false, //用户操作之后是否停止自动轮播默认true
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.content-case-study-data-next',
          prevEl: '.content-case-study-data-prev',
        },
        slidesPerView: 1,
        spaceBetween: 30,
        centeredSlides: false,
        loop: true,
        grabCursor: true,
      });
    },
    openInfoDialog() {
      this.$router.push({name:"formPage"})
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.channel-mobile {
  overflow: hidden;
  &-title {
    text-align: center;
    padding: 80px 0 60px 0;
    margin: 0 auto;
    h3 {
      font-size: 46px;
      font-weight: bold;
      color: #000000;
      line-height: 50px;
    }
    p {
      margin-top: 40px;
      height: 18px;
      font-size: 28px;
      font-weight: 400;
      color: #666666;
      line-height: 30px;
    }
    &.dark {
      h3,
      p {
        color: #ffffff;
      }
    }
  }
  &-banner {
    position: relative;
    &-img {
      img {
        position: relative;
        width: 100%;
        height: auto;
        display: block;
      }
    }
    &-info {
      width: 70%;
      position: absolute;
      left: 20px;
      top: 22%;
      z-index: 1;
      color: #ffffff;
      &-desc {
        h2 {
          font-size: 50px;
          font-weight: bold;
          line-height: 54px;
        }
        p {
          margin-top: 30px;
          span {
            display: block;
            font-size: 30px;
            line-height: 60px;
            &:first-child {
              font-size: 40px;
            }
          }
        }
      }
      &-btn {
        margin-top: 50px;
      }
    }
  }
  &-product {
    background-image: url(https://static.pdwl.net/jituan/images/mobile/digitalMan/cp_bg.png);
    background-size: 100% 100%;
    padding-bottom: 80px;
    overflow: hidden;
    &-body {
      margin: 20px 0;
      overflow-x: scroll;
      white-space: nowrap;
      display: flex;
      &-item {
        display: inline-block;
        min-width: 80%;
        flex: 1;
        &-img {
          margin: 0 20px;
          position: relative;
          img {
            display: block;
            margin: 0;
            padding: 0;
            width: 100%;
            height: auto;
          }
          p {
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 1;
            text-align: center;
            width: 100%;
            height: 80px;
            background: linear-gradient(90deg, #006fff 0%, #62dea6 100%);
            font-size: 40px;
            color: #ffffff;
            line-height: 80px;
          }
        }
      }
    }
    &-desc {
      &-item {
        width: 50%;
        float: left;
        &-box {
          margin: 20px;
          display: flex;
          img {
            width: auto;
            height: 40px;
          }
          span {
            flex: 1;
            margin-left: 20px;
            height: 40px;
            font-size: 26px;
            color: #000000;
            line-height: 40px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
  &-living {
    &-body {
      img {
        width: 100%;
        height: auto;
        margin-top: 40px;
      }
    }
  }
  &-live {
    background-image: url(https://static.pdwl.net/jituan/images/mobile/digitalMan/live_bg.png);
    background-size: 100% 100%;
    padding-bottom: 80px;
    overflow: hidden;
    &-body {
      margin: 20px 60px;
      // overflow-x: scroll;
      // white-space: nowrap;
      // display: flex;
      &-item {
        display: inline-block;
        // min-width: 70%;
        // flex: 1;
        h5 {
          margin-top: 20px;
          text-align: center;
          font-size: 40px;
          color: #333333;
          line-height: 44px;
          letter-spacing: 2px;
        }
        img {
          display: block;
          margin: 40px 0 0 0;
          padding: 0;
          width: 100%;
          height: auto;
        }
      }
    }
  }
  &-plattype {
    &-body {
      margin: 80px;
      img {
        width: 100%;
        height: auto;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.channel-mobile {
  .vs-button {
    background: linear-gradient(90deg, #006fff 0%, #60dca7 100%);
    font-size: 24px;
    padding: 0;
    width: 200px;
    margin: 0px;
    border-radius: 8px;
  }
}
</style>
